<template>
	<div :id="`select-${id}`" class="select">
		<fieldset :class="['select-border', { focus: name }]">
			<legend :style="{ width: labelWidth }"></legend>
			<div class="select-item" @click="toggle">
				<span
					:id="`holder-${id}`"
					:class="['holder', { focus: name }]"
					>{{ placeHolder }}</span
				>
				<span v-if="name" class="content">{{ $t(name) }}</span>
				<span :class="['arrow', { rotate: show }]"></span>
			</div>
			<transition name="fade">
				<div v-if="show" class="select-wrapper">
					<div class="select-options">
						<div
							v-for="(item, index) in options"
							:key="index"
							:class="[
								'select-options-item',
								{ active: active === index },
							]"
							@click="selectItem(item, index)"
						>
							<span class="text">{{ $t(item.name) }}</span>
							<span class="icon"></span>
						</div>
					</div>
				</div>
			</transition>
		</fieldset>
	</div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
export default {
	props: {
		options: {
			default: [],
		},
		value: {},
		placeHolder: {},
	},
	setup(props, ctx) {
		const state = reactive({
			id: "",
			show: false,
			name: "",
			active: NaN,
			holderWidth: "",
			labelWidth: "",
		});
		const randomId = () => {
			var Num = "";
			for (var i = 0; i < 6; i++) {
				Num += Math.floor(Math.random() * 10);
			}
			state.id = Num;
		};
		const toggle = () => {
			if (!props.options.length) {
				return;
			}
			state.show = !state.show;
		};
		const selectItem = (item, index) => {
			state.active = index;
			state.name = item.name;
			ctx.emit("update:value", item.value);
			state.show = false;
		};
		const clickOut = (e) => {
			const selectEl = document.getElementById(`select-${state.id}`);
			if (e.path.find((item) => item === selectEl)) {
				console.log("inside");
			} else {
				state.show = false;
				console.log("outside");
			}
		};
		const init = () => {
			const initWidth = document
				.getElementById(`holder-${state.id}`)
				.getBoundingClientRect().width;
			state.holderWidth = initWidth;
		};
		watch(
			() => state.name,
			(newVal, oldVal) => {
				if (!oldVal && newVal) {
					state.labelWidth = state.holderWidth * 0.71 + "px";
				}
			}
		);
		onMounted(() => {
			init();
			randomId();
			window.addEventListener("click", clickOut);
		});
		onUnmounted(() => {
			window.removeEventListener("click", clickOut);
		});
		return {
			...toRefs(state),
			toggle,
			selectItem,
		};
	},
};
</script>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
.select {
	position: relative;
	width: 100%;
	height: 0.46rem;
	background-color: #fefaf4;
	border-radius: 0.1rem;
	font-size: 0.14rem;
	color: #baa38f;
	&-border {
		height: 100%;
		width: 100%;
		padding: 0 0.12rem 0 0.2rem;
		border-width: 0;
		border-style: solid;
		border-color: currentColor;
		background-color: #fefaf4;
		transition: border-width 0.5s cubic-bezier(0.25, 0.8, 0.5, 1);
		border-radius: 0.1rem;
		&.focus {
			background-color: white;
			border-width: 0.01rem;
		}
		legend {
			box-sizing: content-box;
			padding-right: 0.02rem;
			transition: width 0.5s cubic-bezier(0.25, 0.8, 0.5, 1);
		}
	}
	&-item {
		.xe();
		.aic();
		height: 100%;
		position: relative;
		.holder {
			max-width: 100%;
			white-space: nowrap;
			overflow-x: hidden;
			text-overflow: ellipsis;
			color: currentColor;
			padding-left: 0.02rem;
			line-height: 0.2rem;
			position: absolute;
			left: 0;
			transition-property: all;
			transition-duration: 0.5s;
			transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1);
			transition-delay: 0s;
			transform-origin: top left;
			&.focus {
				transform: translateY(-0.2rem) scale(0.71);
			}
		}
		.content {
			position: absolute;
			left: 0;
			color: #1b2559;
		}
		.arrow {
			height: 0.24rem;
			width: 0.24rem;
			background: url(../../assets/images/icon_arrow_down.svg) no-repeat
				center;
			background-size: contain;
			transition: all 0.3s ease;
			&.rotate {
				transform: rotate(180deg);
			}
		}
	}
	&-wrapper {
		padding-top: 0.1rem;
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translateY(100%);
		z-index: 2;
	}
	&-options {
        max-height: 3rem;
overflow-y: auto;
		width: 2.63rem;
		padding: 0.06rem 0.16rem;
		background-color: white;
		border: 0.01rem solid #baa38f;
		border-radius: 0.16rem;
		box-shadow: 0px 18px 40px 0px rgba(112, 144, 176, 0.12);
		&-item {
			padding: 0.1rem 0;
			border-bottom: 0.01rem solid #baa38f;
			color: #121314;
			font-size: 0.14rem;
			font-weight: bold;
			&.active {
				color: #baa38f;
				.icon {
					visibility: visible;
				}
			}
			&:last-child {
				border: none;
			}
			.xb();
			.aic();
			.text {
				line-height: 0.24rem;
			}
			.icon {
				height: 0.2rem;
				width: 0.2rem;
				background: url(../../assets/images/icon_success.svg) no-repeat
					center;
				background-size: contain;
				visibility: hidden;
			}
		}
	}
}
</style>